<template>
  <div class="design-dashboard">
    <vue-draggable-resizable v-if="chartsConfig && chartsConfig.length>1" v-for="(value ,index) in chartsConfig"
                              @resizestop="onResizstop"
                              @dragstop="onDragstop"
                              @activated="onActivated(index)"
                              :custom-id="value.chartId"
                              :key="value.chartId"
                              :parent="true"
                              :style="value.css"
                              :w="value.layout.width" :h="value.layout.height"
                              :x="value.layout.offsetLeft" :y="value.layout.offsetTop">
        <init-chart-layout :init-config="index" :style="value.font"></init-chart-layout>
    </vue-draggable-resizable>
  </div>
</template>
<script>

import InitChartLayout from './chartlayout/InitChartLayout'
import {mapGetters, mapActions} from 'vuex'

export default {
  name: 'DashBoard',
  components: {
    InitChartLayout
  },
  data () {
    return {
      index: 0
    }
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'chartsConfig'
    ])
  },
  methods: {
    ...mapActions('app', { onResize: 'onResize', onDrag: 'onDrag' }),
    onActivated (index) {
      this.index = index
      this.$emit('selectIndex', index)
    },
    onResizstop (x, y, width, height) {
      this.onResize({index: this.index, x: x, y: y, width: width, height: height})
    },
    onDragstop (x, y, z) {
      this.onDrag({index: this.index, x: x, y: y})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.design-dashboard{
  height: 100%;
  position: relative;
}
</style>
